<template>
    <div>
        <div class="content">
            <vxe-form :data="formData" :items="formItems" :rules="rules" titleColon> </vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane label="query" name="query">
                    <vxe-form :data="formData.query">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="formData.query.api" placeholder="请输入接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item title="接口方法" span="4">
                            <template #default>
                                <vxe-select v-model="formData.query.method" placeholder="请输入接口方法" :options="methodOptions"></vxe-select>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="queryPane">
                        <el-tab-pane label="beforeQuery" name="beforeQuery">
                            <monaco-editor v-model="formData.query.beforeQuery" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="afterQuery" name="afterQuery">
                            <monaco-editor v-model="formData.query.afterQuery" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="queryAll" name="queryAll">
                    <vxe-form :data="formData.queryAll">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="formData.queryAll.api" placeholder="请输入接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item title="接口方法" span="4">
                            <template #default>
                                <vxe-select v-model="formData.queryAll.method" placeholder="请输入接口方法" :options="methodOptions"></vxe-select>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="queryAllPane">
                        <el-tab-pane label="beforeQueryAll" name="beforeQueryAll">
                            <monaco-editor v-model="formData.queryAll.beforeQueryAll" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="afterQueryAll" name="afterQueryAll">
                            <monaco-editor v-model="formData.queryAll.afterQueryAll" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="delete" name="delete">
                    <vxe-form :data="formData.delete">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="formData.delete.api" placeholder="请输入接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item title="接口方法" span="4">
                            <template #default>
                                <vxe-select v-model="formData.delete.method" placeholder="请输入接口方法" :options="methodOptions"></vxe-select>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="deletePane">
                        <el-tab-pane label="beforeDelete" name="beforeDelete">
                            <monaco-editor v-model="formData.delete.beforeDelete" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="afterDelete" name="afterDelete">
                            <monaco-editor v-model="formData.delete.afterDelete" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="insert" name="insert">
                    <vxe-form :data="formData.insert">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="formData.insert.api" placeholder="请输入接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item title="接口方法" span="4">
                            <template #default>
                                <vxe-select v-model="formData.insert.method" placeholder="请输入接口方法" :options="methodOptions"></vxe-select>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="insertPane">
                        <el-tab-pane label="beforeInsert" name="beforeInsert">
                            <monaco-editor v-model="formData.insert.beforeInsert" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="afterInsert" name="afterInsert">
                            <monaco-editor v-model="formData.insert.afterInsert" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="update" name="update">
                    <vxe-form :data="formData.update">
                        <vxe-form-item title="接口名称" span="6">
                            <template #default>
                                <vxe-input v-model="formData.update.api" placeholder="请输入接口名称" clearable></vxe-input>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item title="接口方法" span="4">
                            <template #default>
                                <vxe-select v-model="formData.update.method" placeholder="请输入接口方法" :options="methodOptions"></vxe-select>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                    <el-tabs v-model="updatePane">
                        <el-tab-pane label="beforeUpdate" name="beforeUpdate">
                            <monaco-editor v-model="formData.update.beforeUpdate" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                        <el-tab-pane label="afterUpdate" name="afterUpdate">
                            <monaco-editor v-model="formData.update.afterUpdate" :height="paneHeight" language="javascript" />
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="保存完成后执行函数" name="save">
                    <monaco-editor v-model="formData.save.afterSave" :height="paneHeight" language="javascript" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import { proxyDataDefault } from "./propsDefault";
    const paneHeight = ref(document.documentElement.scrollHeight - 584 + "px");
    const activeName = ref("query");
    const queryPane = ref("beforeQuery");
    const queryAllPane = ref("beforeQueryAll");
    const deletePane = ref("beforeDelete");
    const insertPane = ref("beforeInsert");
    const updatePane = ref("beforeUpdate");
    const props = defineProps({
        formData: {
            type: Object,
            default: proxyDataDefault,
        },
    });
    console.log("代理配置", props.formData);
    // 表单校验
    const rules = ref({
        name: [{ required: true, message: "请输入表名称" }],
    });
    const methodOptions = ref([
        { label: "get", value: "get" },
        { label: "post", value: "post" },
        { label: "put", value: "put" },
        { label: "delete", value: "delete" },
    ]);

    const formItems = reactive([
        {
            field: "enabled",
            title: "是否启用",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "autoLoad",
            title: "是否自动加载查询数据",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "paramsChangeLoad",
            title: "参数改变时重新请求数据",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "message",
            title: "是否显示内置的消息提示",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "seq",
            title: "是否代理动态序号",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "sort",
            title: "是否代理排序",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "filter",
            title: "是否代理筛选",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "form",
            title: "是否代理表单",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },

        { field: "props.list", title: "响应结果中获取数据列表的属性", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "props.result", title: "响应结果中获取数据列表的属性", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "props.total", title: "响应结果中获取分页的属性", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "props.message", title: "响应结果中获取提示消息的属性", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
</script>
<style scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
</style>
